<template>
    <a-layout-header class="header">
        <div class="logo">
            <router-link to="/home">
                <img src="@/assets/logo.png" style="border-radius: 50%;width: 50px;height: 50px"/>
                SMART HOME
            </router-link>
        </div>
        <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent style="float: right;font-size: 18px">
                <img v-if="loginUser.pic != null" :src="loginUser.pic"
                     class="pic"/>
                <img v-else src="https://lyj-mall-bucket.oss-cn-guangzhou.aliyuncs.com/20230129/default.png"
                     class="pic"/>
                {{loginUser.username}}
                <DownOutlined/>
            </a>
            <template #overlay>
                <a-menu>
                    <a-menu-item @click="openUpdatePasswordModal">
                        修改密码
                    </a-menu-item>
                    <a-menu-item @click="switchAvatars">
                        切换头像
                    </a-menu-item>
                    <a-menu-item @click="logout">
                        退出登录
                    </a-menu-item>
                    <a-menu-item @click="testConnect">
                        测试连接
                    </a-menu-item>
                </a-menu>
            </template>
        </a-dropdown>
    </a-layout-header>
    <a-modal v-model:visible="visible" title="修改密码" @ok="handleOk">
        <a-form
                :model="passwordData"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
        >
            <a-form-item
                    label="原始密码"
                    name="oldPassword"
                    :rules="[{ required: true, message: '请输入原始密码!' }]"
            >
                <a-input-password v-model:value="passwordData.oldPassword"/>
            </a-form-item>

            <a-form-item
                    label="新密码"
                    name="newPassword"
                    :rules="[{ required: true, message: '请输入新的密码!' }]"
            >
                <a-input-password v-model:value="passwordData.newPassword"/>
            </a-form-item>
        </a-form>
    </a-modal>
    <a-modal v-model:visible="visibleSwitch" title="切换头像" @ok="switchOk" style="text-align: center">
        <upload v-model:imgUrl="imageUrl" :upload-url="'http://47.113.223.105:8088/upload'"></upload>
    </a-modal>
</template>

<script>
    import {ref, onBeforeMount} from 'vue'
    import {DownOutlined, LoadingOutlined, PlusOutlined} from '@ant-design/icons-vue';
    import {message} from 'ant-design-vue'
    import axios from 'axios'
    import {useRouter} from 'vue-router'
    import store from '@/store'
    import cookies from 'vue-cookies'
    import upload from '@/components/upload'

    export default {
        name: "Header",
        components: {
            DownOutlined,
            LoadingOutlined,
            PlusOutlined,
            upload
        },
        setup() {
            const loginUser = ref();
            const router = useRouter()
            const visible = ref(false)
            const visibleSwitch = ref(false)
            const passwordData = ref({})
            const imageUrl = ref('')

            const openUpdatePasswordModal = () => {
                visible.value = true
                passwordData.value.id = loginUser.value.id
            }

            const handleOk = () => {
                console.log("修改密码的数据：", passwordData.value)
                axios.post('user/updatePassword', passwordData.value).then(rs => {
                    if (rs.code == 200) {
                        message.info("密码修改成功")
                        logout()
                    } else {
                        message.error(rs.message)
                    }
                })
            }

            const switchAvatars = () => {
                console.log("切换头像")
                visibleSwitch.value = true
                imageUrl.value = ''
            }

            const switchOk = () => {
                axios.get('/user/switchAvatar', {
                    params: {
                        id: loginUser.value.id,
                        headPicture: imageUrl.value
                    }
                }).then(rs => {
                    if (rs.code == 200) {
                        message.success("头像切换成功")
                        store.commit('setUser', rs.data)
                        loginUser.value.pic = rs.data.pic
                        visibleSwitch.value = false
                    } else {
                        message.error(rs.message)
                    }
                })
            }

            const logout = () => {
                //清楚cookies的账号密码
                cookies.remove("usercode")
                cookies.remove("password")
                //清除session的User
                store.commit('delUser')
                message.info("退出登录")
                router.push('/')
            }

            const testConnect = () => {
                axios.get('testConnect').then(rs => {
                    console.log("测试连接的结果", rs)
                    if (rs.code == 200) {
                        message.success("连接正常")
                    }
                })
            }


            // onMounted(()=>{
            //     loginUser.value = SessionStorage.get("loginUser")
            //     console.log("登录的用户",loginUser)
            // })
            onBeforeMount(() => {
                loginUser.value = store.state.user
                // axios.get('permission/queryByUserId/' + loginUser.value.id).then(rs => {
                //     let menuListTemp = rs.data.filter(item => item.menuType != 2)
                //     menuList.value = arrayToTree(menuListTemp,0)
                // })
            })

            return {
                openUpdatePasswordModal,
                switchAvatars,
                logout,
                loginUser,
                visible,
                passwordData,
                handleOk,
                visibleSwitch,
                switchOk,
                imageUrl,
                testConnect,
            }
        }
    }
</script>

<style scoped>
    .logo {
        float: left;
        width: 200px;
        color: white;
        font-size: 18px;
    }

    .pic {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
</style>